
<template>
  <div class="common-layout">
    <el-container>
      <!-- 头部栏 -->
      <el-header>
        <div class="navbar-left">
          <div class="logo">
            <div class="logo-image"></div>
            <div class="logo-text">芸窗</div>
          </div>

          <div class="periodical">“芸窗”期刊采编系统-管理端</div>
        </div>
        <div class="navbar-right">
          <!-- 黑夜模式 -->
          <div class="dark">
            <el-switch
              v-model="switchValue"
              @change="changeSwitch"
              style="
                zoom: 1.3;
                --el-switch-on-color: #346c9c;
                --el-switch-off-color: #f7de98;
              "
              ><template #active-action>
                <span class="custom-active-action"
                  ><el-icon><Moon /></el-icon
                ></span>
              </template>
              <template #inactive-action>
                <span class="custom-inactive-action"
                  ><el-icon style="color: #f4ce69"><Sunny /></el-icon
                ></span> </template
            ></el-switch>
          </div>
          <!-- 系统退出框 -->
          <el-icon class="close" @click="close()"><SwitchButton /></el-icon>
        </div>
      </el-header>
      <el-container>
        <el-aside
          ><el-col>
            <!-- <br /> -->
            <el-menu
              active-text-color="#ffd04b"
              background-color="rgb(53, 55, 67)"
              style="border-radius: 7px"
              default-active="2"
              text-color="#fff"
              class="el-menu-vertical-demo"
              :router="true"
            >
              <!-- 设置 -->
              <el-menu-item class="home-page" index="/homePage">
                <el-icon><WindPower /></el-icon>
                <span>首页</span>
              </el-menu-item>
              <el-sub-menu index="1">
                <template #title>
                  <span
                    ><el-icon><FolderOpened /></el-icon>期刊与稿件管理</span
                  >
                </template>

                <el-menu-item-group title="期刊管理">
                  <el-menu-item index="/periodical/management"
                    >期刊操作</el-menu-item
                  >
                </el-menu-item-group>
                <el-menu-item-group title="稿件管理">
                  <el-menu-item index="/periodical/ranking"
                    >查看稿件排行</el-menu-item
                  >
                  <el-menu-item index="/periodical/detail"
                    >稿件详情</el-menu-item
                  >
                </el-menu-item-group>
                <el-menu-item-group title="稿件状态">
                  <el-menu-item index="/periodical/online"
                    >接收稿件</el-menu-item
                  >
                  <el-menu-item index="/periodical/removal"
                    >拒绝稿件</el-menu-item
                  >
                </el-menu-item-group>
              </el-sub-menu>

              <!-- 运营 -->
              <el-sub-menu index="2">
                <template #title>
                  <el-icon><DataLine /></el-icon>
                  <span>人员运营</span>
                </template>
                <el-menu-item-group title="人员相关">
                  <el-menu-item index="/personnel/authorManagement"
                    >用户管理</el-menu-item
                  >
                  <el-menu-item index="/personnel/editorManagement"
                    >编辑管理</el-menu-item
                  >
                  <el-menu-item index="/personnel/adminManagement"
                    >管理员操作</el-menu-item
                  > </el-menu-item-group
                ><el-menu-item-group title="其他管理"
                  ><el-menu-item index="/personnel/sensitiveWords"
                    >敏感词封禁</el-menu-item
                  >
                </el-menu-item-group>
              </el-sub-menu>
              <!-- 数据 -->
              <!-- <el-sub-menu index="3">
                <template #title>
                  <el-icon><Star /></el-icon>
                  <span>数据分析</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/data/aiData">Ai数据分析</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu> -->
              <!-- 系统 -->
              <el-sub-menu index="4">
                <template #title>
                  <el-icon><Setting /></el-icon>
                  <span>系统相关</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/system/structureDiagram"
                    >结构图示</el-menu-item
                  >
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-col></el-aside
        >
        <el-container>
          <el-main><router-view></router-view></el-main>
          <el-footer
            ><div class="footer">
              版权声明： &nbsp;&nbsp;2024-2025“芸窗”后台制作 &nbsp;&nbsp;by:季秋
            </div></el-footer
          >
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from "vue";
let switchValue = ref(false);

// 切换主题
const changeSwitch = () => {
  //获取根节点
  let html = document.documentElement;
  switchValue.value ? (html.className = "dark") : (html.className = "");
};

// 退出系统
const close = () => {
  ElMessageBox.confirm("确定退出此系统吗?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "退出成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消退出",
      });
    });
};
</script>

<style scoped >
@import url("@/css/common.css");
@import url("@/assets/fonts/font.css");

.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  background-color: #fff;
  box-shadow: 0 2px 30px rgba(151, 148, 148, 0.3);
}
.home-page {
  height: 40px;
}
.navbar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.logo {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 2px; /* 设置子元素之间的间隔为4px */
  cursor: pointer;
}
.logo-image {
  width: 100px; /* 设置图片盒子的宽度 */
  height: 100px; /* 设置图片盒子的高度 */
  background: url("@/assets/logo.png") no-repeat center/ 60px;
}
.logo-text {
  flex-grow: 1; /* 使文字盒子占据剩余空间 */
  font-size: 32px;
  font-family: "ChongXiSmallSeal";
  color: var(--jiqiu-color);
  line-height: 60px;
}
.periodical {
  height: 60px;
  float: left;
  line-height: 70px;
  margin-left: 20px;
  align-items: center;
  font-size: 40px;
  font-family: "HongLei", sans-serif;
  color: var(--jiqiu-color);
}
.navbar-right {
  display: flex;

  gap: 1rem;
}
.dark {
  margin-left: 30px;
  line-height: 60px;
  cursor: pointer;
}
.close {
  float: right;
  margin-right: 3%;
  height: 60px;
  line-height: 60px;
  font-size: 35px;
  color: var(--jiqiu-color);
  margin-left: 80px;
  cursor: pointer;
}

.el-menu-item.is-active,
.el-menu-item:focus,
.el-menu-item:active {
  color: var(--font-color);
  background-color: var(--jiqiu-color);
}
.el-menu-item:visited,
.el-menu-item:hover {
  color: var(--font-color);
  background-color: var(--jiqiu-color);
}
.el-aside {
  width: 14%;
  padding: 0;
}
:v-deep(.el-menu-item-group__title) {
  font-size: 18px;
}
.el-menu-item {
  font-size: 18px;
}
.el-sub-menu span {
  font-size: 18px;
}
.footer {
  background-color: #e8ebf0;
  height: 60px;
  line-height: 70px;
  font-size: 25px;
  color: var(--jiqiu-color);
  font-family: HongLei;
  text-align: center;
}
</style>